<template>
  <div :id="props.id"
       :style="{width: props.width, height: props.height}"
  ></div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts';
import {onMounted, onUnmounted, defineProps} from 'vue';

export interface BarInterface {
  title: string;
  xData: string[];
  yData: number[];
}

const props = defineProps({
  id: {
    type: String,
    default: 'line'
  },
  theme: {
    type: String,
    default: '' // dark
  },
  width: {
    type: String,
    default: '100%'
  },
  height: {
    type: String,
    default: '100%'
  },
  data: {
    type: Object,
    default: () => {
      return {
        title: '环形图',
        xData: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
        yData: [120, 200, 150, 80, 70, 110, 130]
      }
    }
  },
  //图表标题配置
  titleOption: {
    type: Object,
    default: () => {
      return {
        show: true, //是否显示标题
        fontSize: 16, //标题字体大小
        color: '#333' //标题字体颜色
      }
    }
  },
  option: {
    type: Object,
    default: () => {
      return {
        title: {
          show: true,
          text: '环形图',
          textStyle: {
            fontSize: 16,
            color: '#333'
          }
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '5%',
          left: 'center'
        },
        series: [
          {
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
            ]
          }
        ]
      }
    }
  }
});

onMounted(() => {
  init()
});

function init() {
  const basicBar = echarts.init(document.getElementById(props.id), props.theme);
  props.option.title.text = props.data.title;
  props.option.series[0].data = formatData();
  props.option.title.show = props.titleOption.show;
  props.option.title.textStyle.fontSize = props.titleOption.fontSize;
  props.option.title.textStyle.color = props.titleOption.color;
  basicBar.setOption(props.option);
}

function formatData(){
  const arr = []
  const xData = props.data.xData
  const yData = props.data.yData
  for(let i = 0; i< xData.length; i++){
    arr.push({
      value: yData[i],
      name: xData[i]
    })
  }
  return arr
}


function resize() {
  const basicBar = echarts.init(document.getElementById(props.id), props.theme);
  basicBar.resize();
}

onMounted(() => {
  window.addEventListener('resize', resize);
});

onUnmounted(() => {
  window.removeEventListener('resize', resize);
});

function refreshChart(data: BarInterface) {
  const basicBar = echarts.init(document.getElementById(props.id), props.theme);
  props.option.title.text = data.title;
  props.option.xAxis.data = data.xData;
  props.option.series[0].data = data.yData;
  basicBar.setOption(props.option);
}

defineExpose({
  refreshChart
});


</script>

<style scoped>

</style>